<template>
  <ul class="ca-list">
    <li
      v-for="(item, initial) of hotcity"
      :key="initial"
      class="ca-item"
      @click="handleLetterClick"
      @touchstart="handleTouchStart"
      @touchmove="handleTouchMove"
      @touchend="handleTouchEnd"
    >{{ item.initial }}</li>
  </ul>
</template>

<script>
import cityLists from "../../assets/js/city.json";
export default {
  name: "Apphabet",
  props: {
    // cities: Object,
  },
  data() {
    return {
      hotcity: [],
      touchStatus: false
    };
  },
  methods: {
    handleLetterClick(e) {
      // console.log(e.target.innerText);
      this.$emit("change", e.target.innerText);
    },
    cltyList() {
      // this.hotlists = cityLists.data.hotCities;
      // console.log(this.hotlists);
      this.hotcity = cityLists.city;
      // console.log(this.hotcity.initial);
    },
    handleTouchStart() {
      this.touchStatus = true;
    },
    handleTouchMove() {},
    handleTouchEnd() {
      this.touchStatus = false;
    }
  },
  mounted() {
    this.cltyList();
  }
};
</script>

<style lang="stylus" scoped></style>
